<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>引导页</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<link rel="stylesheet" href="../css/mui.min.css">
	<style>
		.close {
			position: absolute;
			width: 160px;
			left: 50%;
			margin-left: -80px;
			bottom: 15%;
			padding: 10px;
			color: #fff;
			border-color: #fff;
		}
		.item-logo {
			width: 100%;
			height: 100%;
			position: relative;
		}
		.item-logo a {
			width: 200px;
			height: 200px;
			display: block;
			border: 1px solid #FFFFFF;
			border-color: rgba(255, 255, 255, 0.5);
			text-align: center;
			line-height: 200px;
			border-radius: 50%;
			font-size: 40px;
			color: #fff;
			position: absolute;
			top: 15%;
			left: 50%;
			margin-left: -100px;
		}
		.animate {
			position: absolute;
			left: 0;
			bottom: 15%;
			width: 100%;
			color: #fff;
			display: -moz-box;
		}
		.animate h2 {
			text-align: center;
			margin-bottom: 20px;
		}
		.animate li {
			width: 50%;
			height: 30px;
			line-height: 30px;
			list-style: none;
			font-size: 16px;
			text-align: right;
		}
		.animate li:nth-child(3) {
			text-align: left;
			float: right;
		}
		.animated {
			-webkit-animation-duration: 1s;
			-webkit-animation-play-state: paused;
			-webkit-animation-fill-mode: both;
		}
		.guide-show .bounceInDown {
			-webkit-animation-name: bounceInDown;
			-webkit-animation-play-state: running;
			-webkit-animation-delay: 1s;
			display: block;
		}
		.guide-show .bounceInLeft {
			-webkit-animation-name: bounceInLeft;
			display: block;
			-webkit-animation-play-state: running;
		}
		.guide-show .bounceInRight {
			-webkit-animation-name: bounceInRight;
			display: block;
			-webkit-animation-play-state: running;
			-webkit-animation-delay: 0.5s;
		}
		@-webkit-keyframes bounceInDown {
			0%, 60%, 75%, 90%, 100% {
				-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
			}
			0% {
				opacity: 0;
				-webkit-transform: translate3d(0, -3000px, 0);
				transform: translate3d(0, -3000px, 0);
			}
			60% {
				opacity: 1;
				-webkit-transform: translate3d(0, 25px, 0);
				transform: translate3d(0, 25px, 0);
			}
			75% {
				-webkit-transform: translate3d(0, -5px, 0);
				transform: translate3d(0, -5px, 0);
			}
			90% {
				-webkit-transform: translate3d(0, 3px, 0);
				transform: translate3d(0, 3px, 0);
			}
			100% {
				-webkit-transform: none;
				transform: none;
			}
		}
		@-webkit-keyframes bounceInLeft {
			0%, 60%, 75%, 90%, 100% {
				-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
			}
			0% {
				opacity: 0;
				-webkit-transform: translate3d(-3000px, 0, 0);
				transform: translate3d(-3000px, 0, 0);
			}
			60% {
				opacity: 1;
				-webkit-transform: translate3d(25px, 0, 0);
				transform: translate3d(25px, 0, 0);
			}
			75% {
				-webkit-transform: translate3d(-10px, 0, 0);
				transform: translate3d(-10px, 0, 0);
			}
			90% {
				-webkit-transform: translate3d(5px, 0, 0);
				transform: translate3d(5px, 0, 0);
			}
			100% {
				-webkit-transform: none;
				transform: none;
			}
		}
		@-webkit-keyframes bounceInRight {
			0%, 60%, 75%, 90%, 100% {
				-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
			}
			0% {
				opacity: 0;
				-webkit-transform: translate3d(3000px, 0, 0);
				transform: translate3d(3000px, 0, 0);
			}
			60% {
				opacity: 1;
				-webkit-transform: translate3d(-25px, 0, 0);
				transform: translate3d(-25px, 0, 0);
			}
			75% {
				-webkit-transform: translate3d(10px, 0, 0);
				transform: translate3d(10px, 0, 0);
			}
			90% {
				-webkit-transform: translate3d(-5px, 0, 0);
				transform: translate3d(-5px, 0, 0);
			}
			100% {
				-webkit-transform: none;
				transform: none;
			}
		}
	</style>
</head>

<body>
	<div id="slider" class="mui-slider mui-fullscreen">
		<div class="mui-slider-group">
			<!-- 第一张 -->
			<div class="mui-slider-item">
				<div class="item-logo">
					<img src="../image/app.guide.1.jpg" />
				</div>
			</div>
			<div class="mui-slider-item">
				<div class="item-logo">
					<img src="../image/app.guide.2.jpg" />
				</div>
			</div>
			<!-- 最后一张 -->
			<div class="mui-slider-item">
				<div class="item-logo">
					<img src="../image/app.guide.3.jpg" id="close"/>
				</div>
			</div>
		</div>
		<div class="mui-slider-indicator">
			<div class="mui-indicator mui-active"></div>
			<div class="mui-indicator"></div>
			<div class="mui-indicator"></div>
			<div class="mui-indicator"></div>
		</div>
	</div>
	<script src="../js/mui.min.js"></script>
	<script>
		mui.back = function() {};
		mui.plusReady(function() {
			if(mui.os.ios){
				plus.navigator.setFullscreen(true);
			}
			plus.navigator.closeSplashscreen();
		});
		//立即体验按钮点击事件
		document.getElementById("close").addEventListener('tap', function(event) {
			plus.storage.setItem("installed", "true");
			plus.navigator.setFullscreen(false);
			plus.webview.currentWebview().close();
		}, false);
	</script>
</body>
</html>